<template>
    <view>
        <view @longpress="onStart" @touchend="onEnd" class="rowbox content" style="background: #f0f2f5;">
            按住 说话
        </view>
        <view v-if="inrecord" class="voice-box columnbox">
            <image style="width: 400rpx;border-radius: 20rpx;height: 150rpx;" src="/static/img/voice.gif"
                mode="aspectFill"></image>
            <!-- <view class="wrap">
                <view class="box">
                    <view class="box1">
                        <view class="box2">
                            <view class="box3">
                                <view class="box4">
                                </view>
                            </view>
                        </view>
                    </view>
                </view>
            </view> -->
        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                record: '', // 全局唯一录音管理区
                inrecord: false, // 是否处于录音状态
                isRecorder: false, // 是否处于语音状态
            };
        },
        created() {
            this.record = uni.getRecorderManager()
        },
        methods: {
            // 长按开始录入语音
            onStart() {
                this.inrecord = true
                console.log(this.record)
                this.record.start()
            },
            onEnd() {
                console.log('结束录音');
                this.inrecord = false
                this.record.stop()
                // 监听录音暂停的回调参数
                this.record.onStop(res => {
                    console.log(res, "录音回调地址");
                    if (res.duration < 500) {
                        uni.showToast({
                            title: '语音时间过短',
                            icon: ''
                        })
                        return false
                    }
                    let url =res.tempFilePath
                    uni.showModal({
                        title: '是否确认发送',
                        success: (res) => {
                            if (res.confirm) {
                                this.$req.uploadSound(url).then(res => {
                                    console.log('===', res.data.data)
                                    this.$emit('change', res.data.data)
                                })
                            }
                        }
                    })

                })
                this.record.onError(err => {
                    console.log('获取录音失败', err)
                })
            },
            onRecorderchange() {
                if (this.isRecorder) {
                    this.isRecorder = false
                } else {
                    uni.authorize({
                        scope: 'scope.record',
                        success: res => {
                            this.isRecorder = true
                        }
                    })
                }
            },
        }
    }
</script>

<style lang="scss" scoped>
    .content {
        background-color: #fff;
        height: 64rpx;
        padding: 0 20rpx;
        border-radius: 32rpx;
        font-size: 28rpx;
        position: relative;
        z-index: 9;
    }

    .voice-box {
        position: fixed;
        width: 100%;
        height: 100vh;
        background: rgba(#000, .4);
        top: 0px;
        z-index: 7;
        left: 0;
    }

    .wrap {
        padding: 40rpx 200rpx;
        position: relative;
        background: #fff;
        border-radius: 20rpx;
        /*transform: rotateZ(45deg);*/
        /*-webkit-transform: rotateZ(45deg);*/
    }

    .box {
        width: 100rpx;
        height: 100rpx;
        border-top-right-radius: 100rpx;
        transform: rotateZ(45deg);
        -webkit-transform: rotateZ(45deg);
        animation: obox linear 1s 5000;
    }

    @keyframes obox {
        0% {
            background: #00b6b2;
        }

        33% {
            background: #00b6b2;
        }

        66% {
            background: rgba(#fff, 0);
        }

        100% {
            background: #00b6b2;
        }
    }

    @-webkit-keyframes obox {
        0% {
            background: #00b6b2;
        }

        33% {
            background: #00b6b2;
        }

        66% {
            background: rgba(#fff, 0);
        }

        100% {
            background: #00b6b2;
        }
    }

    .box1 {
        width: 80rpx;
        height: 80rpx;
        background-color: white;
        position: absolute;
        left: 0;
        bottom: 0px;
        border-top-right-radius: 100rpx;
    }

    .box2 {
        width: 60rpx;
        height: 60rpx;
        background: #00b6b2;
        position: absolute;
        left: 0;
        bottom: 0px;
        border-top-right-radius: 100rpx;
        animation: obox2 linear 1s 5000;
    }

    @keyframes obox2 {
        0% {
            background: #00b6b2;
        }

        33% {
            background: rgba(#fff, 0);
        }

        66% {
            background: #00b6b2;
        }

        100% {
            background: #00b6b2;
        }
    }

    @-webkit-keyframes obox2 {
        0% {
            background: #00b6b2;
        }

        33% {
            background: #00b6b2;
        }

        66% {
            background: rgba(#fff, 0);
        }

        100% {
            background: #00b6b2;
        }
    }

    .box3 {
        width: 40rpx;
        height: 40rpx;
        background-color: white;
        position: absolute;
        left: 0;
        bottom: 0px;
        border-top-right-radius: 100rpx;
    }

    .box4 {
        width: 20rpx;
        height: 20rpx;
        background: #00b6b2;
        position: absolute;
        left: 0;
        bottom: 0px;
        border-top-right-radius: 100rpx;
    }
</style>